<script lang="ts" setup>
const props = withDefaults(
  defineProps<{
    maskClosable?: boolean //点击遮罩关闭modal
    title?: string //标题
    align?: 'center' | 'start' //标题对齐方式
    draggable?: boolean //拖拽
    width?: string
    visible: boolean
    full?: boolean //全屏
    footer?: boolean
    view?: boolean //只读查看
    beforeOk?: void
    ok?: void
  }>(),
  {
    maskClosable: true,
    draggable: false,
    align: 'start',
    full: false,
    footer: true,
    view: false,
  }
)
const emit = defineEmits(['cancel', 'update:visible'])
const isFull = ref(props.full)
const show = ref(props.visible)
watch(
  () => show.value,
  n => {
    emit('update:visible', n)
  }
)
</script>
<template>
  <a-drawer :title="props.title" :width="$props.width" :visible="visible" :mask-closable="$props.maskClosable" @before-ok="props.beforeOk" :footer="$props.footer" @ok="props.ok" @cancel="emit('cancel')" unmountOnClose>
    <div>
      <slot />
    </div>
  </a-drawer>
</template>
<style lang="less" scoped></style>
